<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>历史记录 - 鱼情助手</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        .glass-effect {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }
        .tab-active {
            background: rgba(255, 255, 255, 0.3);
            border-bottom: 2px solid white;
        }
        .chart-bar {
            transition: all 0.3s ease;
        }
    </style>
</head>
<body class="min-h-screen">
    <!-- 顶部导航 -->
    <div class="fixed top-0 left-0 right-0 z-50 glass-effect">
        <div class="flex items-center justify-between p-4">
            <a href="fishing-log.html" class="text-white text-xl">
                <i class="fas fa-arrow-left"></i>
            </a>
            <h1 class="text-white text-lg font-semibold">历史记录</h1>
            <button class="text-white text-xl">
                <i class="fas fa-filter"></i>
            </button>
        </div>
    </div>

    <!-- 时间选择 -->
    <div class="fixed top-16 left-0 right-0 z-40 glass-effect">
        <div class="flex items-center p-2">
            <button class="time-btn flex-1 py-2 px-4 text-white text-center tab-active text-sm" data-time="week">
                本周
            </button>
            <button class="time-btn flex-1 py-2 px-4 text-white text-center text-sm" data-time="month">
                本月
            </button>
            <button class="time-btn flex-1 py-2 px-4 text-white text-center text-sm" data-time="year">
                本年
            </button>
            <button class="time-btn flex-1 py-2 px-4 text-white text-center text-sm" data-time="all">
                全部
            </button>
        </div>
    </div>

    <!-- 主要内容 -->
    <div class="pt-32 pb-24 px-4">
        <!-- 统计概览 -->
        <div class="glass-effect rounded-2xl p-4 mb-6 text-white">
            <h2 class="text-lg font-semibold mb-4">本周统计</h2>
            <div class="grid grid-cols-2 gap-4">
                <div class="bg-white/10 rounded-xl p-3 text-center">
                    <div class="text-2xl font-bold text-green-300">25</div>
                    <div class="text-sm opacity-80">总钓获</div>
                    <div class="text-xs opacity-60 mt-1">+8 条</div>
                </div>
                <div class="bg-white/10 rounded-xl p-3 text-center">
                    <div class="text-2xl font-bold text-blue-300">15.2</div>
                    <div class="text-sm opacity-80">总重量(kg)</div>
                    <div class="text-xs opacity-60 mt-1">+3.5 kg</div>
                </div>
                <div class="bg-white/10 rounded-xl p-3 text-center">
                    <div class="text-2xl font-bold text-purple-300">6</div>
                    <div class="text-sm opacity-80">出钓次数</div>
                    <div class="text-xs opacity-60 mt-1">+2 次</div>
                </div>
                <div class="bg-white/10 rounded-xl p-3 text-center">
                    <div class="text-2xl font-bold text-yellow-300">85%</div>
                    <div class="text-sm opacity-80">成功率</div>
                    <div class="text-xs opacity-60 mt-1">+5%</div>
                </div>
            </div>
        </div>

        <!-- 鱼种分布图表 -->
        <div class="glass-effect rounded-2xl p-4 mb-6 text-white">
            <h2 class="text-lg font-semibold mb-4">鱼种分布</h2>
            <div class="space-y-3">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-4 h-4 bg-green-400 rounded"></div>
                        <span class="text-sm">鲫鱼</span>
                    </div>
                    <div class="flex items-center space-x-2">
                        <div class="w-32 h-2 bg-white/20 rounded-full overflow-hidden">
                            <div class="w-20 h-full bg-green-400 chart-bar"></div>
                        </div>
                        <span class="text-sm">12条</span>
                    </div>
                </div>
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-4 h-4 bg-blue-400 rounded"></div>
                        <span class="text-sm">草鱼</span>
                    </div>
                    <div class="flex items-center space-x-2">
                        <div class="w-32 h-2 bg-white/20 rounded-full overflow-hidden">
                            <div class="w-16 h-full bg-blue-400 chart-bar"></div>
                        </div>
                        <span class="text-sm">8条</span>
                    </div>
                </div>
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-4 h-4 bg-purple-400 rounded"></div>
                        <span class="text-sm">黑鱼</span>
                    </div>
                    <div class="flex items-center space-x-2">
                        <div class="w-32 h-2 bg-white/20 rounded-full overflow-hidden">
                            <div class="w-10 h-full bg-purple-400 chart-bar"></div>
                        </div>
                        <span class="text-sm">3条</span>
                    </div>
                </div>
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-4 h-4 bg-orange-400 rounded"></div>
                        <span class="text-sm">鲤鱼</span>
                    </div>
                    <div class="flex items-center space-x-2">
                        <div class="w-32 h-2 bg-white/20 rounded-full overflow-hidden">
                            <div class="w-6 h-full bg-orange-400 chart-bar"></div>
                        </div>
                        <span class="text-sm">2条</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 最佳钓点 -->
        <div class="glass-effect rounded-2xl p-4 mb-6 text-white">
            <h2 class="text-lg font-semibold mb-4">最佳钓点</h2>
            <div class="space-y-3">
                <div class="bg-white/10 rounded-xl p-3 card-hover">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="font-medium">杭州西湖</div>
                            <div class="text-sm opacity-80">18次出钓</div>
                        </div>
                        <div class="text-right">
                            <div class="text-lg font-bold text-green-300">92%</div>
                            <div class="text-xs opacity-80">成功率</div>
                        </div>
                    </div>
                    <div class="mt-2 text-xs opacity-70">
                        <i class="fas fa-star text-yellow-300"></i>
                        平均每次 3.2 条 · 最佳时段: 早晨6-8点
                    </div>
                </div>
                <div class="bg-white/10 rounded-xl p-3 card-hover">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="font-medium">西溪湿地</div>
                            <div class="text-sm opacity-80">12次出钓</div>
                        </div>
                        <div class="text-right">
                            <div class="text-lg font-bold text-green-300">88%</div>
                            <div class="text-xs opacity-80">成功率</div>
                        </div>
                    </div>
                    <div class="mt-2 text-xs opacity-70">
                        <i class="fas fa-star text-yellow-300"></i>
                        平均每次 2.8 条 · 最佳时段: 傍晚5-7点
                    </div>
                </div>
                <div class="bg-white/10 rounded-xl p-3 card-hover">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="font-medium">千岛湖</div>
                            <div class="text-sm opacity-80">8次出钓</div>
                        </div>
                        <div class="text-right">
                            <div class="text-lg font-bold text-green-300">95%</div>
                            <div class="text-xs opacity-80">成功率</div>
                        </div>
                    </div>
                    <div class="mt-2 text-xs opacity-70">
                        <i class="fas fa-star text-yellow-300"></i>
                        平均每次 4.1 条 · 最佳时段: 全天候
                    </div>
                </div>
            </div>
        </div>

        <!-- 详细记录列表 -->
        <div class="glass-effect rounded-2xl p-4 text-white">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-semibold">详细记录</h2>
                <button class="text-sm text-blue-300" onclick="showAllRecords()">展开全部</button>
            </div>
            
            <div class="space-y-3" id="recordsList">
                <!-- 今天记录 -->
                <div class="border-l-4 border-green-400 pl-3">
                    <div class="text-sm font-medium text-green-300 mb-2">今天</div>
                    <div class="space-y-2">
                        <div class="bg-white/10 rounded-xl p-3 card-hover">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-3">
                                    <img src="https://images.unsplash.com/photo-1544552866-d3ed42536cfd?w=40&h=40&fit=crop" 
                                         class="w-10 h-10 rounded-lg object-cover">
                                    <div>
                                        <div class="font-medium">草鱼</div>
                                        <div class="text-xs opacity-80">杭州西湖 · 14:30</div>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <div class="text-sm font-medium">1.2kg</div>
                                    <div class="text-xs opacity-80">1条</div>
                                </div>
                            </div>
                        </div>
                        <div class="bg-white/10 rounded-xl p-3 card-hover">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-3">
                                    <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=40&h=40&fit=crop" 
                                         class="w-10 h-10 rounded-lg object-cover">
                                    <div>
                                        <div class="font-medium">鲫鱼</div>
                                        <div class="text-xs opacity-80">杭州西湖 · 12:15</div>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <div class="text-sm font-medium">1.6kg</div>
                                    <div class="text-xs opacity-80">2条</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 昨天记录 -->
                <div class="border-l-4 border-blue-400 pl-3">
                    <div class="text-sm font-medium text-blue-300 mb-2">昨天</div>
                    <div class="space-y-2">
                        <div class="bg-white/10 rounded-xl p-3 card-hover">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-3">
                                    <img src="https://images.unsplash.com/photo-1535591273668-578e31182c4f?w=40&h=40&fit=crop" 
                                         class="w-10 h-10 rounded-lg object-cover">
                                    <div>
                                        <div class="font-medium">黑鱼</div>
                                        <div class="text-xs opacity-80">西溪湿地 · 16:20</div>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <div class="text-sm font-medium">1.5kg</div>
                                    <div class="text-xs opacity-80">1条</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 更多记录（隐藏） -->
                <div class="hidden" id="moreRecords">
                    <div class="border-l-4 border-purple-400 pl-3">
                        <div class="text-sm font-medium text-purple-300 mb-2">3天前</div>
                        <div class="space-y-2">
                            <div class="bg-white/10 rounded-xl p-3 card-hover">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center space-x-3">
                                        <img src="https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=40&h=40&fit=crop" 
                                             class="w-10 h-10 rounded-lg object-cover">
                                        <div>
                                            <div class="font-medium">鲤鱼</div>
                                            <div class="text-xs opacity-80">千岛湖 · 全天</div>
                                        </div>
                                    </div>
                                    <div class="text-right">
                                        <div class="text-sm font-medium">8.5kg</div>
                                        <div class="text-xs opacity-80">5条</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white/90 backdrop-blur-lg border-t border-gray-200">
        <div class="flex items-center justify-around p-2">
            <a href="index.html" class="flex flex-col items-center p-2 text-gray-400">
                <i class="fas fa-home text-xl"></i>
                <span class="text-xs mt-1">首页</span>
            </a>
            <button class="flex flex-col items-center p-2 text-gray-400">
                <i class="fas fa-map text-xl"></i>
                <span class="text-xs mt-1">地图</span>
            </button>
            <a href="fishing-log.html" class="flex flex-col items-center p-2 text-blue-500">
                <i class="fas fa-plus-circle text-2xl"></i>
                <span class="text-xs">记录</span>
            </a>
            <button class="flex flex-col items-center p-2 text-gray-400">
                <i class="fas fa-bell text-xl"></i>
                <span class="text-xs mt-1">通知</span>
            </button>
            <button class="flex flex-col items-center p-2 text-gray-400">
                <i class="fas fa-user text-xl"></i>
                <span class="text-xs mt-1">我的</span>
            </button>
        </div>
    </div>

    <script>
        // 时间选择切换
        document.querySelectorAll('.time-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const time = this.dataset.time;
                
                // 移除所有活动状态
                document.querySelectorAll('.time-btn').forEach(b => b.classList.remove('tab-active'));
                
                // 添加当前活动状态
                this.classList.add('tab-active');
                
                // 更新数据显示
                updateStatistics(time);
            });
        });

        function updateStatistics(timeRange) {
            // 这里可以根据时间范围更新统计数据
            console.log('更新统计数据:', timeRange);
        }

        function showAllRecords() {
            const moreRecords = document.getElementById('moreRecords');
            const button = event.target;
            
            if (moreRecords.classList.contains('hidden')) {
                moreRecords.classList.remove('hidden');
                button.textContent = '收起';
            } else {
                moreRecords.classList.add('hidden');
                button.textContent = '展开全部';
            }
        }

        // 初始化图表动画
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(() => {
                document.querySelectorAll('.chart-bar').forEach(bar => {
                    bar.style.transform = 'scaleX(1)';
                });
            }, 500);
        });
    </script>
</body>
</html> 